<template>
  <view class="content">
    <view class="row b-b">
      <text class="tit">品牌</text>
      <input class="input" type="text" v-model="addressData.C_Brand" placeholder="请输入品牌"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">车牌号</text>
      <input class="input" type="text" v-model="addressData.C_PN" placeholder="请输入车牌号"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">能源类型</text>
      <input class="input" type="number" v-model="addressData.C_ET" placeholder="请输入能源类型"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">损坏情况</text>
      <input class="input" type="text" v-model="addressData.C_Damage" placeholder="请输入损坏情况"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">油箱容量</text>
      <input class="input" type="text" v-model="addressData.C_V" placeholder="请输入油箱容量"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">排放量</text>
      <input class="input" type="text" v-model="addressData.C_Emi" placeholder="请输入排放量"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">燃油标号</text>
      <input class="input" type="text" v-model="addressData.C_Oil" placeholder="请输入燃油标号"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">座位数</text>
      <input class="input" type="text" v-model="addressData.C_Seat" placeholder="请输入座位数"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">车门数</text>
      <input class="input" type="text" v-model="addressData.C_Door" placeholder="请输入车门数"
        placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">租车价格</text>
      <input class="input" type="text" v-model="addressData.C_Price" placeholder="请输入租车价格"
        placeholder-class="placeholder" />
    </view>
     <view class="row b-b">
      <text class="tit">汽车图片</text>
      <input class="input" type="text"  placeholder="请上传汽车图片"  placeholder-class="placeholder" />
      <button  @click="upImage">上传图片</button>
    </view> 
  <view class="image-content">
    <image style="width: 100%; height: 7rem; background-color: #eeeeee;" :src="src"></image>
  </view>  
    
    <button class="add-btn" @click="confirm()">提交</button>
  </view>
  <view class="uniappDemo">
    <!-- 弹框内容 -->
    <view class="uniappBox">
      <view :hidden="!uniappShowModel" class="uniappContant">
        <view class="uniappTitle">提示</view>
        <view class="uniappNotice">确认是否添加？</view>
        <!-- 确定取消按钮 -->
        <view class="uniappBtn">
          <view @tap="uniappShowModel = false">取消</view>
          <view @tap="confirm1()">确定</view>
        </view>
      </view>
      <!-- 背景黑色蒙版 -->
      <view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
    </view>
  </view>


  <view class="uniappDemo">
    <!-- 弹框内容 -->
    <view class="uniappBox">
      <view :hidden="!uniappShowModel2" class="uniappContant">
        <view class="uniappTitle">提示</view>
        <view class="uniappNotice">添加商品成功！</view>
        <!-- 确定取消按钮 -->
        <view class="uniappBtn2" @tap="confirm2()">确定</view>
      </view>
      <!-- 背景黑色蒙版 -->
      <view class="uniappBgdCol" :hidden="!uniappShowModel2" @tap="uniappShowModel2 = false"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src:'',
        base64: '',
        urlImg: '',
        newImg: '',
        uniappShowModel: false, //默认不显示
        uniappShowModel2: false, //默认不显示
        addressData: {
          // C_ID: '',
          C_Brand: '',
          C_PN: '',
          C_ET: '',
          C_Damage: '',
          C_V: '',
          C_Emi: '',
          C_Oil: '',
          C_PN: '',
          C_Price: '',
          C_Door: '',
          C_Seat: '',
        }
      }
    },
    onLoad(option) {},
    methods: {
      // 点击确定按钮模态框消失
      confirm1() {
        this.uniappShowModel = false;
        let data = this.addressData;
        console.log(JSON.stringify(data))
        this.uniappShowModel2 = true
        this.addcar()
      },
      confirm2() {
        this.uniappShowModel2 = false
        uni.navigateTo({
          url: '/pages/index/index'
        });
      },
      //提交
      confirm() {
        let data = this.addressData;
        // console.log(JSON.stringify(data))
        this.uniappShowModel = true;
      },
      upImage() {
        let _this = this
        uni.chooseMedia({
          count: 1, //最多可以选择的文件个数
          mediaType: ['image'], //文件类型
          sourceType: ['album', 'camera'], //图片和视频选择的来源
          success(res) {
            console.log('图片路径')
            console.log(res.tempFiles)
            _this.src = res.tempFiles[0].tempFilePath
            console.log('src.tempFilePath:' + _this.src)
            // console.log('src:' + _this.src[0].tempFilePath)
            console.log(JSON.stringify(res.tempFiles))
            // _this.fileupload()
            //解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
            // uni.getImageInfo({
            //   src: res.tempFiles[0].tempFilePath,
            //   success: path => {
            //     pathToBase64(path.path).then(base64 => {
            //         // console.log(base64) // 这就是转为base64格式的图片
            //         _this.base64 = base64
            //         _this.imgUrl = 'data:image/png;base64,' + base64
            //         _this.updateAdmin()
            //       })
            //       .catch(error => {
            //         console.error(error)
            //       })
            //   }
            // })
          },
          fail(res) {
            console.log(res)
          }
        })
      },
      async addcar() {
        let _this = this
        const {
          data: res
        } = uni.request({
          url: 'http://127.0.0.1:3007/api/add-car',
          method: 'post',
          data: {
            // C_ID:this.addressData.C_ID,
            carBrand: this.addressData.C_Brand,
            carPN: this.addressData.C_PN,
            carET: this.addressData.C_ET,
            carDamage: this.addressData.C_Damage,
            carV: this.addressData.C_V,
            carEmi: this.addressData.C_Emi,
            carOil: this.addressData.C_Oil,
            carPN: this.addressData.C_PN,
            carPrice: this.addressData.C_Price,
            carImage: this.src,
            carDoor: this.addressData.C_Door,
            carSeat: this.addressData.C_Seat,
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },
          success: res => {
            console.log(res.data)
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    padding-top: 16upx;
  }

  .row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 30upx;
    height: 110upx;
    background: #fff;
    margin-top: 2px;

    .tit {
      flex-shrink: 0;
      width: 120upx;
      font-size: 30upx;

    }

    .input {
      flex: 1;
      font-size: 30upx;

    }

    .icon-shouhuodizhi {
      font-size: 36upx;

    }
  }

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690upx;
    height: 80upx;
    margin: 60upx auto;
    background-color: rgb(28, 42, 134);
    color: #fff;

    border-radius: 10upx;
    box-shadow: 1px 2px 5px rgba(28, 42, 134, 0.4);
  }

  .uniappBgdCol {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99;
    -moz-opacity: 0.6;
    opacity: .6;
    filter: alpha(opacity=88);
  }

  .uniappContant {
    position: fixed;
    top: 36%;
    left: 50%;
    width: 80%;
    margin-left: -40%;
    background-color: white;
    z-index: 100;
    border-radius: 10rpx;
  }

  .uniappTitle {
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #161303;
    font-size: 28rpx;
    padding: 20rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    ;
  }

  .uniappNotice {
    font-size: 28rpx;
    color: #121212;
    display: flex;
    justify-content: center;
    padding: 40rpx 0rpx;
  }

  .uniappBtn {
    display: flex;
    justify-content: space-between;
  }

  .uniappBtn2 {
    text-align: center;
    background-color: rgb(254, 209, 10);
    border: 1px solid white;
    border-radius: 0rpx 0rpx 0rpx 10rpx;
    margin-top: 2px;
    height: 30px;
    padding-top: 5px;
  }

  .uniappBtn view {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4% 0%;
    font-size: 28rpx;
  }

  .uniappBtn view:first-child {
    background-color: rgb(254, 250, 230);
    border-radius: 0rpx 0rpx 0rpx 10rpx;
  }

  .uniappBtn view:last-child {
    background-color: rgb(254, 209, 10);
    border-radius: 0rpx 0rpx 10rpx 0rpx;
  }
</style>